<template>
    <div class="pagination">
        <button :disabled="pageNo == 1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
        <button v-show="StartNumAndEndNum.start > 1" @click="$emit('getPageNo',1)">1</button>
     
        <button v-show="StartNumAndEndNum.start > 2">···</button>

        <button v-for="page,index in StartNumAndEndNum.end" :key="index" v-show="page>=StartNumAndEndNum.start" @click="$emit('getPageNo',index+1)" :class="{active:pageNo == page}">{{page}}</button>

        <button v-show="StartNumAndEndNum.end<totalPages-1">···</button>
        <button v-show="StartNumAndEndNum.end<totalPages" @click="$emit('getPageNo',totalPages)">{{totalPages}}</button>
        <button :disabled = "pageNo ==totalPages "  @click="$emit('getPageNo',pageNo+1)"> 下一页</button>

        <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props:["pageNo","pageSize","total","coutinues"],
        computed:{
          totalPages(){
            return Math.ceil(this.total/this.pageSize)
          },
          StartNumAndEndNum(){
            let start = 0
            let end = 0
            if (this.totalPages<this.coutinues) {
                this.start = 1
                this.end = this.totalPages
            }else{
                start = this.pageNo - parseInt(this.coutinues/2)
                end = this.pageNo + parseInt(this.coutinues/2)
                if (start<1) {
                  start = 1 
                 end = this.coutinues
                }
                if (end>this.totalPages) {
                    end = this.totalPages
                    start = this.totalPages - this.coutinues + 1
                }
            }
            return {start,end}
          }
        }
    }
</script>

<style lang="less" scoped>
.pagination {
  text-align: center;
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;

    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }

    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
  .activebtn{
      background: red;
  }
}
.active{
  background: skyblue;
}
</style>